<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .green{
        color: greenyellow;
    }
    .red{
        color: red;
    }
</style>
<body>
    <input type="text" placeholder="恶语伤人心，善语结知己">
    <span></span>

    <script>
        const input=document.querySelector('input')
        const reg=/^[a-zA-Z0-9]{2,6}$/
        input.addEventListener('blur',function(){
            if(reg.test(input.value)){
                input.nextElementSibling.innerHTML='输入正确'
                input.nextElementSibling.className='green'
            }else{
                input.nextElementSibling.innerHTML='输入错误'
                input.nextElementSibling.className='red'
            }
        })
    </script>
</body>
</html>